<template>
    <go-back></go-back>

    <div class="login">
        <!-- <h3>登录页</h3> -->
        <div class="form">
            <h4>用户登录</h4>
            <div class="opt">
                <span class="label">账号:</span>
                <input v-model="formData.account" type="text" placeholder="请输入账号/邮箱">
            </div>
            <div class="opt">
                <span class="label">密码:</span>
                <input v-model="formData.password" type="password" placeholder="请输入密码">
            </div>
            <div class="opt opt-2">
                <span class="label">验证码:</span>
                <input v-model="vcode" type="text" placeholder="请输入验证码">
                <button @click="sendEmailFn" class="btn-send">{{ message }}</button>
            </div>
            <div class="opt">
                <van-button @click="loginFn" class="btn-login" type="default">登录</van-button>
            </div>
            <div class="opt opt-3">
                <RouterLink to="/register">免费注册</RouterLink>
                <RouterLink to="/findpwd">忘记密码?</RouterLink>
            </div>
        </div>

    </div>
</template>

<script lang="ts" setup>
import { showFailToast, showToast } from 'vant';
import GoBack from '@/components/GoBack.vue';
import { reactive, ref } from 'vue';
import request from '@/api/request';

//  响应式对象
let formData = reactive({
    account: "",
    password: "",
})
let vcode = ref('')
let message = ref('发送邮箱验证码')
let num = ref(60);
let isSend: boolean = true;
let timer: any = null;
// 倒计时数数
const downNum = () => {
    num.value--;
    message.value = `${num.value}秒后重新发送`
    timer = setInterval(() => {
        num.value--;
        message.value = `${num.value}秒后重新发送`
        if (num.value == 0) {
            clearInterval(timer);
            message.value = `点击重新发送`
            isSend = true;
            num.value = 60;
        }
    }, 1000)
}
// 发邮箱验证码
const sendEmailFn = async () => {
    // 获取邮箱/账号
    let email = formData.account;
    // console.log("用户输入的验证码:",vcode.value);
    // console.log("邮箱:",email);
    if (email.length != 0) {
        if (/\w+@qq.com$/.test(email)) {
            // 布尔值做开关
            if (isSend) {
                isSend = false;
                downNum();
                // 调用api发送邮件
                await request.emailSend({ email })
                    .then(
                        content => {
                            // console.log(content);
                            let { msg } = content;
                            showToast(msg)
                        }
                    )
            }
        }
        else {
            showToast("邮箱格式不正确")
        }
    }
    else {
        showFailToast("请输入账号")
    }
}

// 登录账号
const loginFn = async () => {
    // 获取邮箱/账号
    let email = formData.account;
    let vcode2 = vcode.value;
    // console.log("用户输入的验证码:",vcode.value);
    // console.log("邮箱:",email);
    if (email.length == 0 || vcode2.length == 0) {
        showFailToast("输入框不能为空")
    }
    else {
        // 布尔值
        let isPass = false;
        // 判断验证码是否正确
        await request.emailVerify({ email, vcode: vcode2 })
            .then(
                content => {
                    let { code } = content;
                    // console.log(content);
                    if (code == 200) {
                        isPass = true;
                    }
                }
            )
        // 如果验证码通过，就注册账号
        if (isPass) {
            let { account, password } = formData;
            if (account && password) {
                // 有值
                // 调用注册接口
                await request.login({ account, password })
                    .then(
                        content => {
                            let { code, msg, nickName, token } = content;
                            // console.log(content)
                            localStorage.setItem("AUTOTOKEN", token);
                            localStorage.setItem("NICKNAME", nickName);
                            if (code == 200) {
                                // showSuccessToast(msg);
                                showToast(msg);
                                // 跳转个人中心页
                                setTimeout(() => {
                                    $router.replace({ path: '/my' })
                                }, 150)
                            }
                            else {
                                showFailToast(msg);
                            }
                        }
                    )
            }
            else {
                showFailToast("缺少参数,请检查再提交")
            }
        }
    }
}



</script>

<style lang="less">
@import '../static/less/variable.less';

.login {
    padding: @pad;
    font-size: 18px;

    .form {
        padding-top: 50px;

        .opt {
            margin-top: 15px;
            width: 100%;
            display: flex;
            align-items: center;
            font-size: 16px;

            .label {
                width: 90px;
                display: inline-block;
                flex-shrink: 0;
                text-align: right;
                padding-right: 10px;
                height: 44px;
                line-height: 44px;
            }

            input {
                font-size: 17px;
                border-bottom: 1px solid #ccc;
                height: 44px;
                padding-left: 10px;
            }

            .btn-send {
                width: calc(100% - 90px);
                background-color: transparent;
                font-size: 15px;
            }

            a {
                font-size: 15px;
            }
        }

        .opt-2 {
            input {
                width: 70%;
                margin-right: 5px;
            }
        }

        .opt-3 {
            justify-content: space-between;
        }
    }

    .btn-login {
        background-color: @bgColor;
        color: #fff;
        width: 100%;
    }
}

.bottom {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}
</style>